<template>
    <div class="tr">
        <div class="tr-header">
            <div class="h-1">
                {{transl('拥有接送服务')}}
            </div>
            <div class="h-2">
                {{transl('省去途中停车让车烦恼，快速抵达目的地')}}
            </div>
        </div>
        <img class="card" :src="publicUrl('/img/card.png')" />
        <div class="sc">
            <div class="sc-1">{{transl("出发时间：")}}{{ transl(data.departure) }}</div>
            <div class="sc-1">{{transl('返程时间：')}}{{ transl(data.returnTime) }}</div>
            <div class="sc-1">{{transl('结合地点：')}}{{ transl(data.assembling) }}</div>
            <div class="sc-1">{{transl('行程备注：')}}{{ transl('此行程为纯看房团，绝非旅行团') }}</div>
            <div class="sc-2" v-show="show">
                <div class="sc-2-t">
                    {{transl('行程安排')}}
                </div>
                <div class="sc-2-tree">
                    <div class="tree-item" v-for="(p,index) in data.schedule" :key="index">
                        <div :class="['i-l i-b', !(index !== data.schedule.length - 1 && index%2 !== 0) ? '':'i-border-r']">
                            <div class="i-b-in" v-if="index%2 !== 0">
                                <div class="i-b-time">{{ p.time }}</div>
                                <div class="i-b-address">
                                    {{ transl(p.address) }}
                                </div>
                            </div>
                        </div>
                        <div class="i-c">
                            <div class="c-round">
                                <div :class="['round-in',index%2 === 0 ? 'r-r':'r-l']"></div>
                            </div>
                        </div>
                        <div :class="['i-r i-b',!(data.schedule.length - 1 !== index && index%2 === 0) ? '':'i-border-l']">
                            <div class="i-b-in" v-if="index%2 === 0">
                                <div class="i-b-time">{{ transl(p.time) }}</div>
                                <div class="i-b-address">
                                    {{ transl(p.address) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="show-col" @click="show = !show">
                <div class="show-t">
                    {{ transl(!show ? '点击查看行程安排':'收起行程安排') }}
                </div>
                <img :class="[show?'is-ro':'']" :src="publicUrl('/img/show-col.png')" />
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { publicUrl } from "@/utils/index"
import { reactive, ref } from "vue";
import type { Schedule } from "@/api/interface/site"
import { LangStore } from "@/stores/modules/lang"
const { transl } = LangStore()
import dayjs from "dayjs"
const data = reactive<Schedule>({
    departure:"05.01周三-05.05周日 09:00出发 ",
    returnTime:"05.01周三-05.05周日 17:30返程",
    assembling:"旺角维景酒店(太子地铁站C2出口)",
    schedule:[
        {time:"第一天",address:"特色美食"},
        {time:"上午",address:"参观[印象·鸿基山水]"},
        {time:"上午",address:"参观[蓝城·鹭鸟香山小镇]"},
        {time:"中午",address:"酒楼美食"},
        {time:"下午",address:"逛游城区"},
        {time:"晚上",address:"星级酒店"},
        {time:"第二天上午",address:"参观[华发观山水]"},
        {time:"中午",address:"自助美食"},
        {time:"下午",address:"参观[骏景峰·境樾]"},
        {time:"下午",address:"参观[雅居乐·星玥]"},
        {time:"下午",address:"返程"}
    ]
})
const show = ref(false)
</script>
    
<style scoped lang="scss">
@import "./index.scss";
</style>